<template>
	<div class="main">
		<div class="top">
			<span>姓名：唐伟科</span>
			<span>班级：2207A</span>
			<span>剩余时间: {{ hour }}:{{ minute }}:{{ second }}</span>
		</div>
		<div class="answer">
			<h1>如何打开我的头盖骨？</h1>
			<!-- <a-textarea v-focus v-model:value="answer" :autoSize="{ minRows: 20, maxRows: 20 }" showCount :maxlength="1000" size="large" /> -->
			<textarea
				@paste.native.capture.prevent="handleFalse"
				@copy.native.capture.prevent="handleFalse"
				@cut.native.capture.prevent="handleFalse"
				@keyup.native="compute"
				class="answertext"
				v-focus
				v-model="answer"
				id=""
				cols="30"
				rows="20"
				:maxlength="maxlength"
				placeholder="在此填写"
			></textarea>
			<p>
				<span>{{ answer.length }}</span
				>/{{ maxlength }}
			</p>
			<a-button @click="submit" danger type="primary">立即交卷</a-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
const answer = ref('');
const maxlength = ref(1000);
const vFocus = {
	mounted: (el: any) => el.focus(),
};
// 倒计时
const hours = ref(2);
const minutes = ref(0);
const seconds = ref(0);
const num = (n: number) => {
	return n < 10 ? '0' + n : '' + n;
};
// 倒计时函数
const add = () => {
	let time = setInterval(() => {
		if (hours.value !== 0 && minutes.value === 0 && seconds.value === 0) {
			hours.value -= 1;
			minutes.value = 59;
			seconds.value = 59;
		} else if (hours.value === 0 && minutes.value !== 0 && seconds.value === 0) {
			minutes.value -= 1;
			seconds.value = 59;
		} else if (hours.value === 0 && minutes.value === 0 && seconds.value === 0) {
			seconds.value = 0;
			clearInterval(time);
			submit();
		} else if (hours.value !== 0 && minutes.value !== 0 && seconds.value === 0) {
			minutes.value -= 1;
			seconds.value = 59;
		} else {
			seconds.value -= 1;
		}
	}, 1000);
};
const hour = computed(() => {
	return num(hours.value);
});
const minute = computed(() => {
	return num(minutes.value);
});
const second = computed(() => {
	return num(seconds.value);
});
const submit = () => {
	console.log('胶卷了同学');
};
onMounted(() => {
	add();
});

// 禁用复制粘贴
const handleFalse = () => false;
const compute = () => {};
// 禁用控制台
// document.oncontextmenu = new Function('event.returnValue=false')
// document.onkeydown = () => {
// 	//禁用F12
// 	if (window.event && window.event.keyCode == 123) {
// 		return false;
// 		//禁用ctrl+shift+i,
// 	}
// 	if (window.event.ctrlKey && window.event.shiftKey && window.event.keyCode == 73) {
// 		return false;
// 		//屏蔽Shift+F10
// 	}
// 	if (window.event.shiftKey && window.event.keyCode == 121) {
// 		return false;
// 	}
// };
</script>

<style scoped lang="less">
.main {
	background-color: #fff;
	height: 100vh;
	width: 50vw;
	margin: 0 auto;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	padding: 0 20px;
	.top {
		flex: 1;
		margin: 20px 0;
		border-radius: 10px;
		// border: 1px solid #999;
		display: flex;
		justify-content: space-around;
		background: url(https://s2.kaoshixing.com/static/account/images/login_reg/admin-login-bg.png?v=55e538df9f) no-repeat;
		background-size: 100% 100%;
		span {
			font-size: 30px;
			line-height: 100px;
			margin: 0 30px;
		}
	}
	.answer {
		flex: 10;
		border-radius: 10px;
		// border: 1px solid #999;
		margin-bottom: 40px;
		padding: 30px;
		background: url(https://s2.kaoshixing.com/static/account/images/login_reg/admin-login-bg.png?v=55e538df9f) no-repeat;
		background-size: 100% 100%;
		p {
			float: right;
		}
		.answertext {
			padding: 10px;
			font-size: 20px;
			width: 100%;
			min-height: 600px;
			max-height: 600px;
			text-indent: 2em;
			border-radius: 10px;
		}
	}
}
</style>